/<template>
    <div class="sidebarconent">
         <van-sidebar v-model="activeKey" >
            <van-sidebar-item v-for="(item, index) in list" 
            :key="index" 
            :title="item.title"
            :badge="item.sum>0?item.sum:''" />
        </van-sidebar>
         <div  v-if="list.length > 0" class="shopping">
                <van-card v-for="(v,i) in list[activeKey].children"
                    :key="i"
                    :num="v.num"
                    :price="v.price"
                    :desc="v.desc"
                    :title="v.title"
                    :thumb="v.img"
                    >
                    <template #tags>
                        <van-tag plain type="danger">标签</van-tag>
                        <van-tag plain type="danger">标签</van-tag>
                    </template>
                    <template #footer>
                        <van-button size="mini" @click="subNum(v.id)">-</van-button>
                        <van-button size="mini" @click="addNum(v.id)">+</van-button>
                    </template>
                </van-card>
        </div>
        <div v-else>
            暂无数据
        </div>
        <van-submit-bar :price="allPrice" button-text="结算" @submit="onSubmit" />
    </div>
</template>

<script>
import {mapState,mapActions} from 'vuex'

export default {
    name:'SidebarBox',
    data() {
        return {
            activeKey: 0,
        };
    },
    // 方法函数
    methods: {
        ...mapActions(['getList']),
        addNum(id){
            this.$store.commit('addNum', {key:this.activeKey , id:id})
        },
        subNum(id){
            this.$store.commit('subNum', {key:this.activeKey , id:id})
        },
        onSubmit(){
            console.log(提交);
        }
    },
    // 计算属性
    computed: {
        ...mapState(['list','allPrice']),
    },
    mounted() {
        this.getList()
    },
}
</script>

<style lang="scss" scoped>
.sidebarconent{
    width: 100%;
    height: calc(100% - 90px);
    overflow: hidden;
    display: flex;
    .van-sidebar{
        width: 80px;
        height: 100%;
    }
    .shopping{
        width: calc(100% - 80px);
        height: 100%;
        overflow: auto;
    }

}
</style>

